<template>
	<view class="container">
		<!-- 头部 -->
		<image src="https://dcdn.it120.cc/2022/02/04/fa78ff5e-553f-40f2-8c78-b7ab8ed8bd39.png" mode=""></image>
		<!-- 实物商品 -->
		<view class="Physical">
			<text>￥1.0</text>
			<view class="box">
				<text class="text1">价格￥</text>
				<text class="text2">199.0</text>
			</view>
			<p>实物商品（购买时需填写收货地址，支持售后）</p>
			<span>本商城所有商品，都是测试商品，仅限线上调试，模拟交易流程</span>
			<view class="Physicalbox">
				<text>运费包邮</text>
				<text>剩余858</text>
			</view>
		</view>
		<!-- 领劵 -->
		<view class="collectCoupons">
			<text>领劵</text>
			<text>></text>
		</view>
		<!-- 服务 -->
		<view class="serve">
			<text>服务</text>
			<text>收货后结算·支持退款</text>
		</view>
		<!-- 评价 -->
		<view class="evaluate">
			<view class="evaluatetop">
				<text>评价（5）</text>
				<text class="text1">全部评价 ></text>
			</view>
			<view class="evaluatecenter">
				<image src="https://dcdn.it120.cc/2022/01/31/ea90f530-4e4f-4a9b-a979-b39cd36429a5.jpg" mode=""></image>
				<text>J****hu</text>
			</view>
			<p>系统默认好评</p>
		</view>
		<!-- 商品详情 -->
		<view class="ProductDetails">
			<image src="https://v-shop.shuzp.top/v2/assets/img/line_askew.225cce63.png" mode=""></image>
			<text>商品详情</text>
			<image src="https://v-shop.shuzp.top/v2/assets/img/line_askew.225cce63.png" mode=""></image>
		</view>
		<!-- 特别提醒 -->
		<view class="Remind">
			<text>【特别提醒】</text>
			<text>1.测试商品，仅限调试。</text>
			<text>2.下单消费，个人中心 -> 积分兑换 -> 兑换成余额进行消费。</text>
			<text>2.实物商品购买时需要填写收货地址，订单使用快递发货。</text>
			<image src="https://dcdn.it120.cc/2022/02/04/fa78ff5e-553f-40f2-8c78-b7ab8ed8bd39.png" mode=""></image>
		</view>
		<!-- 底部 -->
		<view class="footer">
			<view>
				<image src="../../static/likes.png" mode=""></image>
				<text>首页</text>
			</view>
			<view>
				<image src="../../static/message.png" mode=""></image>
				<text>客服</text>
			</view>
			<view>
				<image src="../../static/ShoppingCart.png" mode=""></image>
				<text>购物车</text>
			</view>
			<button class="btn1">加入购物车</button>
			<button class="btn2">立即购买</button>
		</view>
	</view>


</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.container image {
		width: 100%;
		height: 800rpx;
	}

	.Physical {
		display: flex;
		flex-direction: column;
	}

	.Physical text {
		font-size: 5.87vw;
		color: #1ba784;
	}

	.box .text1 {
		font-size: 3.2vw;
		color: #969799;
	}

	.box .text2 {
		font-size: 3.2vw;
		color: #969799;
		text-decoration: line-through
	}

	.collectCoupons {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.collectCoupons text {
		font-size: 3.73vw;
	}

	.collectCoupons text:nth-child(2) {
		color: #969799;
	}

	.Physical p {
		font-size: 4.27vw;
		padding-top: 30rpx;
	}

	.Physical span {
		font-size: 3.2vw;
		color: #969799;
		padding-top: 10rpx;
	}

	.Physicalbox {
		display: flex;
		justify-content: space-between;
		padding-top: 40rpx;
	}

	.Physicalbox text {
		font-size: 3.2vw;
		color: #969799;
	}

	.serve {
		margin-top: 3rpx;
		height: 6.4vw;
		line-height: 6.4vw;
		font-size: 3.2vw;
	}

	.serve text:nth-child(1) {
		color: #969799;
		margin-right: 3.2vw;
	}

	.evaluate {
		display: flex;
		flex-direction: column;
	}

	.evaluate p {
		font-size: 3.73vw;
		color: #969799;
	}

	.evaluatetop {
		display: flex;
		justify-content: space-between;
		margin-bottom: 2.67vw;
	}

	.evaluatetop {
		font-size: 3.73vw;
	}

	.evaluatetop .text1 {
		color: #969799;
	}

	.evaluatecenter {
		display: flex;
		align-items: center;
		margin-bottom: 2.67vw;
	}

	.evaluatecenter image {
		width: 10.67vw;
		height: 10.67vw;
		border-radius: 50%;
	}

	.evaluatecenter text {
		font-size: 3.73vw;
	}

	.ProductDetails {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.ProductDetails image {
		width: 5.33vw;
		height: 1.6vw;
	}

	.ProductDetails text {
		font-size: 4.27vw;
		color: #323233;
		font-weight: 700;
		margin: 30rpx;
	}

	.Remind {
		display: flex;
		flex-direction: column;
		font-size: 4.27vw;
		color: rgb(224, 62, 45);
	}

	.Remind image {
		width: 30.67vw;
		height: 30.67vw;
	}

	.footer {
		display: flex;
		align-items: center;
		height: 13.33vw;
		width: 100%;
		position: fixed;
		bottom: 0;
		background: rgb(247, 247, 250);
	}

	.footer view {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-right: 5vw;
	}

	.footer view image {
		width: 4.8vw;
		height: 4.8vw;
	}

	.footer view text {
		padding-top: 1vw;
		font-size: 2.67vw;
		color: #646566;
	}

	.footer .btn1 {
		background: #d9f6ef;
		color: #1ba784;
		height: 10.67vw;
		font-size: 3.73vw;
		width: 30vw;
		border-radius: 160rpx;
	}

	.footer .btn2 {
		background: #1ba784;
		color: #fff;
		height: 10.67vw;
		font-size: 3.73vw;
		width: 30vw;
		border-radius: 160rpx;
	}
</style>